<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>阿里百秀</title>
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css" />
    <script src="./assets/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./assets/css/index.css" />
  </head>
  <body>
    <div class="container">
      <div class="row">
        <!-- 左侧 -->
        <div class="header col-md-2">
          <div class="logo">
            <a href="">
              <img class="hidden-xs" src="./assets/images/logo.png" alt="" />
              <span class="visible-xs">阿里百秀</span>
            </a>
          </div>
          <div class="nav">
            <ul>
              <li>
                <i class="glyphicon glyphicon-camera"></i>
                <a href="#">生活馆</a>
              </li>
              <li>
                <i class="glyphicon glyphicon-picture"></i>
                <a href="#">自然汇</a>
              </li>
              <li>
                <i class="glyphicon glyphicon-globe"></i>
                <a href="#">科技潮</a>
              </li>
              <li>
                <i class="glyphicon glyphicon-gift"></i>
                <a href="#">奇趣事</a>
              </li>
              <li>
                <i class="glyphicon glyphicon-glass"></i>
                <a href="#">美食杰</a>
              </li>
            </ul>
          </div>
        </div>
        <!-- 中间 -->
        <div class="col-md-7 content">
          <!-- 新闻 -->
          <div class="news clearfix">
            <ul>
              <li>
                <a href="#">
                  <img src="./assets/images/lg.png" alt="" />
                  <p>阿里百秀</p>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="./assets/images/1.jpg" alt="" />
                  <p>奇了成都一小区护卫长得像 马云市民纷纷求合影</p>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="./assets/images/2.jpg" alt="" />
                  <p>奇了成都一小区护卫长得像 马云市民纷纷求合影</p>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="./assets/images/3.jpg" alt="" />
                  <p>奇了成都一小区护卫长得像 马云市民纷纷求合影</p>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="./assets/images/4.jpg" alt="" />
                  <p>奇了成都一小区护卫长得像 马云市民纷纷求合影</p>
                </a>
              </li>
            </ul>
          </div>
          <!-- 发表 -->
          <div class="publish">
            <div class="row">
              <div class="col-sm-9">
                <a href="#"><h3>生活馆关于指甲的10个健康知识你知道几个?</h3></a>
                <p class="text-muted">alibaixu发布于2015-11-23</p>
                <p class="hidden-xs">
                  指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个
                  人的身体健康状况，快来看看10个暗藏在指甲里知识吧!
                </p>
                <p class="text-muted">
                  <span>阅读(2417)评论(1)赞(18)</span>
                  <span class="hidden-xs">标签∶健康/感染/指甲/疾病，皮肤/营养/趣味生活</span>
                </p>
              </div>
              <div class="col-sm-3 image hidden-xs">
                <img src="./assets/images/3.jpg" alt="" />
              </div>
            </div>
            <div class="row">
              <div class="col-sm-9">
                <a href="#"><h3>生活馆关于指甲的10个健康知识你知道几个?</h3></a>
                <p class="text-muted">alibaixu发布于2015-11-23</p>
                <p class="hidden-xs">
                  指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个
                  人的身体健康状况，快来看看10个暗藏在指甲里知识吧!
                </p>
                <p class="text-muted">
                  <span>阅读(2417)评论(1)赞(18)</span>
                  <span class="hidden-xs">标签∶健康/感染/指甲/疾病，皮肤/营养/趣味生活</span>
                </p>
              </div>
              <div class="col-sm-3 image hidden-xs">
                <img src="./assets/images/3.jpg" alt="" />
              </div>
            </div>
            <div class="row">
              <div class="col-sm-9">
                <a href="#"><h3>生活馆关于指甲的10个健康知识你知道几个?</h3></a>
                <p class="text-muted">alibaixu发布于2015-11-23</p>
                <p class="hidden-xs">
                  指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个
                  人的身体健康状况，快来看看10个暗藏在指甲里知识吧!
                </p>
                <p class="text-muted">
                  <span>阅读(2417)评论(1)赞(18)</span>
                  <span class="hidden-xs">标签∶健康/感染/指甲/疾病，皮肤/营养/趣味生活</span>
                </p>
              </div>
              <div class="col-sm-3 image hidden-xs">
                <img src="./assets/images/3.jpg" alt="" />
              </div>
            </div>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="col-md-3">
          <a href="#" class="banner">
            <img src="./assets/images/zgboke.jpg" alt="" />
          </a>
          <a href="" class="hot">
            <span class="btn btn-primary">热搜</span>
            <h4 class="text-primary">欢迎加入中国博客联盟</h4>
            <p>这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式傅客联盟交流和展示平台.</p>
          </a>
        </div>
      </div>
    </div>
  </body>
</html>
